<template>
  <div class="project-purchase-tender">
    <van-row type="flex" justify="end">
      <van-col>
        <van-button
          :disabled="!recordCanEdit"
          size="small"
          type="primary"
          @click="openPopup(undefined)"
        >添加中标信息</van-button>
      </van-col>
    </van-row>

    <v-table
      is-horizontal-resize
      style="width:100%;margin-top:12px;"
      :columns="tableCol"
      :table-data="tableData"
      row-hover-color="#eee"
      row-click-color="#edf7ff"
      title-bg-color="#eee"
      :row-click="rowClick"
    ></v-table>
    <div class="pageContainer">
      <van-pagination
        v-model="pageIndex"
        :total-items="total"
        :items-per-page="10"
        force-ellipses
        @change="pageChange"
      />
    </div>

    <van-popup v-model="popupVisible">
      <div class="project-purchase-tender-popup-container">
        <div class="popupTitle">中标信息</div>
        <van-field v-model="tenderDetail.model" label="中标型号" :disabled="curIndex > -1" />
        <van-field
          v-model="tenderDetail.quantity"
          label="数量（套）"
          :disabled="curIndex > -1"
          type="number"
        />
        <van-field
          v-model="tenderDetail.price"
          label="中标价格"
          :disabled="curIndex > -1"
          type="number"
        />
        <van-field v-model="tenderDetail.createDate" label="创建日期" v-show="curIndex > -1" disabled />
        <van-row type="flex" justify="end" class="popupBtnContainer">
          <van-button size="small" class="popupBtn" @click="popupVisible = false">关闭</van-button>
          <van-button
            size="small"
            type="danger"
            class="popupBtn"
            v-if="curIndex > -1"
            @click="deleteItem"
          >删除</van-button>
          <van-button
            size="small"
            type="info"
            class="popupBtn"
            v-if="curIndex == -1"
            @click="saveItem"
          >保存</van-button>
        </van-row>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  Row,
  Col,
  Button,
  Popup,
  Field,
  NumberKeyboard,
  Pagination,
  Toast
} from "vant";
import { mapActions } from "vuex";
import { formatDate } from "@/utils";
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [NumberKeyboard.name]: NumberKeyboard,
    [Pagination.name]: Pagination
  },
  data() {
    return {
      detail: {},
      tableCol: [
        {
          field: "model",
          title: "中标型号",
          width: 40,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true
        },
        {
          field: "quantity",
          title: "数量（套）",
          width: 40,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true
        },
        {
          field: "price",
          title: "中标价格",
          width: 40,
          titleAlign: "center",
          columnAlign: "center",
          isResize: true
        }
      ],
      tableData: [],
      total: 0,
      pageIndex: 1,

      tenderDetail: {
        model: "",
        quantity: "",
        price: "",
        createDate: ""
      },
      curIndex: -1,
      popupVisible: false,
      recordCanEdit: true // 作废或者审批拒绝则不能编辑
    };
  },
  mounted() {
    let detail = this.$store.state.projectPurchase.projectPurchaseDetail;
    this.detail = detail;
    if (detail.delFlag || detail.approveStatus == 0) {
      this.recordCanEdit = false;
    }
    this.initData();
  },
  methods: {
    ...mapActions({
      getTenderList: "projectPurchase/getTenderList",
      addTender: "projectPurchase/addTender",
      deleteTender: "projectPurchase/deleteTender"
    }),
    initData() {
      this.getList();
    },
    pageChange(page) {
      this.pageIndex = page;
      this.getList();
    },
    getList() {
      this.getTenderList({
        s_groupPurchaseProjectId: this.detail.id,
        limit: 10,
        page: this.pageIndex
      })
        .then(res => {
          console.log(res);
          this.total = res.count;
          this.tableData = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    rowClick(rowIndex, rowData, column) {
      this.openPopup(rowData, rowIndex);
    },
    openPopup(item, index) {
      if (this.recordCanEdit) {
        if (item) {
          let obj = JSON.parse(JSON.stringify(item));
          obj.createDate = formatDate(new Date(item.createDate), "yyyy-MM-dd");
          this.tenderDetail = obj;
          this.curIndex = index;
        } else {
          this.resetDetail();
        }
        this.popupVisible = true;
      }
    },
    resetDetail() {
      this.tenderDetail = {};
      this.curIndex = -1;
    },
    deleteItem() {
      if (this.curIndex > -1) {
        this.deleteTender({
          id: this.tenderDetail.id
        })
          .then(res => {
            console.log(res);
            if (res.success) {
              Toast.success("删除成功");
              this.popupVisible = false;
              this.pageIndex = 1;
              this.getList();
            } else {
              Toast.fail("删除失败");
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    saveItem() {
      this.addTender({
        model: this.tenderDetail.model,
        quantity: this.tenderDetail.quantity,
        price: this.tenderDetail.price,
        groupPurchaseProjectId: this.detail.id
      })
        .then(res => {
          console.log(res);
          if (res.success) {
            Toast.success("保存成功");
            this.popupVisible = false;
            this.pageIndex = 1;
            this.getList();
          } else {
            Toast.fail("保存失败");
          }
        })
        .catch(err => {
          console.log(err);
          Toast.fail("保存失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.project-purchase-tender {
  margin: 8px 0;
  &-popup-container {
    margin: 12px;
    width: 300px;
    .popupTitle {
      font-size: 18px;
    }
    .popupBtnContainer {
      margin: 8px;
      .popupBtn {
        margin-left: 8px;
      }
    }
  }
  .pageContainer {
    margin: 8px;
  }
}
</style>